<template>
  <div class="content">
    <!-- 为什么选择我们 -->
    <div class="u-why">
      <div class="u-why-con">
        <div class="u-whymy">
          <h1>为什么选择我们</h1>
          <p>WHY DO YOU CHOOSE US</p>
          <span>良好的开场是成功的一半。正确的选择开设账户的公司是交易成功最主要的一个因素，因为您一切的交易运作都要通过它来完成英联国际金融集团,为您提供安全的资金保障、专业的市场讯息、丰富的交易品种、完善的外汇教学、先进图表工具及卓越优质的报价来进一步提升您的交易体验</span>
        </div>
        <div class="u-list">
          <div class="u-list-l">
            <div>
              <img src="./images/box.png" alt="">
              <span>
              <h3>B2B发展模式</h3>
              <p>与合作伙伴无利益冲突</p>
            </span>
            </div>
            <div>
              <img src="./images/box.png" alt="">
              <span>
              <h3>监管合规</h3>
              <p>资金安全有保障</p>
            </span>
            </div>
          </div>
          <div class="u-list-l">
            <div>
              <img src="./images/box.png" alt="">
              <span>
              <h3>流动性丰沛</h3>
              <p>与世界顶级流动性提供商深度合作</p>
            </span>
            </div>
            <div>
              <img src="./images/box.png" alt="">
              <span>
              <h3>深耕外汇市场多年</h3>
              <p>客户遍及全球20多个国家</p>
            </span>
            </div>
          </div>
          <div class="u-list-l">
            <div>
              <img src="./images/box.png" alt="">
              <span>
              <h3>高速执行 稳定流畅</h3>
              <p>国际最高规格服务器架构</p>
            </span>
            </div>
            <div>
              <img src="./images/box.png" alt="">
              <span>
              <h3>STP-ECN交易模式</h3>
              <p>阳光下的透明交易</p>
            </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 丰富的交易产品 -->
    <div class="u-product">
      <div class="u-product-con">
        <h1>丰富的交易产品</h1>
        <p>Rich trading products</p>
        <ul>
          <li>
            <img src="./images/gold.png" alt="">
            <p>外汇主流盘</p>
          </li>
          <li>
            <img src="./images/gold.png" alt="">
            <p>外汇稀有盘</p>
          </li>
          <li>
            <img src="./images/gold.png" alt="">
            <p>现货黄金</p>
          </li>
          <li>
            <img src="./images/gold.png" alt="">
            <p>现货白银</p>
          </li>
          <li>
            <img src="./images/gold.png" alt="">
            <p>原油</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 您拥有全世界最值得信赖的交易平台 -->
    <div class="u-platform">
      <div class="u-platform-con">
        <h1>您拥有全世界最值得信赖的交易平台</h1>
        <p>You have the most trusted trading platform in the world</p>
        <div class="u-platform-con-text">
          <div class="text_left">
            <h2>Meta Trader4(<span>MT4</span>)</h2>
            <p>英联国际提供我们的客户免费登入全球最受欢迎的交易平台 MT4！！只要下载UKDFX MT4平台即可于全球任何时间交易 </p>
            <p>投资，就是这么简单</p>
            <div class="text_img">
              <router-link to="/ourplatfrom"><img src="./images/ar-03.png" alt=""></router-link>
              <img src="./images/ar-04.png" alt="">
              <img src="./images/ar-05.png" alt="">
            </div>
          </div>
          <div class="img_right">
            <img src="./images/computer.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <!-- 完善的教学系统 -->
    <div class="u-teaching">
      <div class="u-teaching-con">
        <h1>完善教学系统</h1>
        <p>24小时成为交易高手，让你像专家一样交易</p>
        <h6>在UKDFX交易平台,我们深信优质的教育和丰富的知识是您交易成功的关键。因此做为高度合规的外汇经济商，我们向您提供交易俱乐部外汇教育栏目：该栏目完全免费并且适合各个阶段的交易者，浅显易懂。涵盖了交易策略、市场、交易心理及风险管理等所有内容。我们与您一起，助理您成为梦想中的交易专家。加入UKDFX交易平台，马上成为交易高手吧！！！</h6>
        <!--<div class="GetInvolved"><a href="http://wpa.qq.com/msgrd?v=3&uin=2568486231&site=qq&menu=yes" target="_blank">立即加入</a></div>-->
<div class="GetInvolved"><a href="#">立即加入</a></div>
      </div>
    </div>
    <!-- 市场交易分析 -->
    <div class="u-news">
      <div class="news">
        <h1>市场新闻及分析</h1>
        <p>Market news and analysis</p>
        <p>您可以直接从邮箱或者MT4界面上获取每日外汇市场及交易条件的最新信息 </p>
        <p>在UKDFX交易平台，我们深信优质的教育和丰富的知识是您交易成功的关键。因此做为高度合规的外汇经济商，我们向您提供交易俱乐部外汇教育栏目：该栏目完全免费并且适合各个阶段的交易者，浅显易懂。涵盖了交易策略、市场、交易心理及风险管理等所有内容。我们与您一起，助理您成为梦想中的交易专家。加入UKDFX交易平台，马上成为交易高手吧！！！</p>
        <div class="box_three">
          <span>每日报告</span><span>交易讯号</span><span>外汇TV</span>
        </div>
        <div class="box_img">
          <img src="./images/1.jpg" alt=""><img src="./images/2.jpg" alt=""><img src="./images/3.jpg" alt="">
        </div>
      </div>
    </div>
    <!-- 跑马灯 -->
    <div id="scrollobj" style="white-space:nowrap;overflow:hidden;width:100%;"><img src="./images/marquee.jpg" alt=""></div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    data (){
        return {

        }
    },
    mounted: function () {
      let that = this;
      let osc = document.querySelector('#scrollobj');
      let timer = null;
      clearInterval(timer);
      this.timer = setInterval(function(){
        that.oScroll(osc)
      },20);
    },
    beforeDestroy(){
      clearInterval(this.timer)
    },
    methods:{
      oScroll (obj) {
        let tmp = (obj.scrollLeft)++;
        //当滚动条到达右边顶端时
        if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML;
        //当滚动条滚动了初始内容的宽度时滚动条回到最左端
        if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0;
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .content
    .u-why
      height: 633px
      background: #fff
      width: 100%
      .u-why-con
        width: 1200px
        margin: 0 auto
        position: relative
        .u-whymy
          width: 432px
          height: 496px
          background: url("./images/why_bg.png") no-repeat
          margin-top: 60px
          margin-left: 14px
          padding: 86px 45px
          box-sizing: border-box
          h1
            font-size: 33px
            color: #555555
            font-family: 'sell-icon'
          p
            font-size: 10px
            color: #555
          span
            font-size: 15px
            color: #8f8f8f
            display: inline-block
            margin-top: 80px
            line-height: 30px
            font-weight: bold
        .u-list
          width: 774px
          height: 465px
          background: #fff
          position: absolute
          top: 148px
          right: 13px
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2)
          padding: 70px 64px
          box-sizing: border-box
          .u-list-l:nth-child(2)
            margin: 35px 0
          .u-list-l
            display: flex
            div:nth-child(1)
              flex:1
            div
              flex: 1
              img
                float: left
                vertical-align: top
              span
                float: left
                margin-left:22px
                display:inline-block
                width: 180px
                h3
                  margin-top: 12px
                  font-size: 17px
                  color: #333333
                p
                  color: #999999
                  font-size: 17px
    .u-product
      width:100%
      height: 470px
      background: url("./images/product_bg.png") no-repeat
      .u-product-con
        width: 1200px
        margin: 0 auto
        padding-top: 30px
        box-sizing: border-box
        h1
          font-size: 27px
          color: #fff
          text-align: center
        p
          font-size: 10px
          color: #999
          text-align: center
        ul
          display: flex
          margin-top: 40px
          li
            width: 208px
            height: 256px
            padding-top: 59px
            box-sizing: border-box
            text-align: center
            margin-left: 40px
            border-radius: 5px
            p:nth-child(2)
              margin-top: 45px;
              font-size: 17px;
              color: #fff;
          li:first-child
            margin-left: 0
            background:url("./images/products_1.png") no-repeat
          li:last-child
            background:url("./images/products_5.png") no-repeat
          li:nth-child(2)
            background:url("./images/products_2.png") no-repeat
          li:nth-child(3)
            background:url("./images/products_3.png") no-repeat
          li:nth-child(4)
            background:url("./images/products_4.png") no-repeat
    .u-platform
      width: 100%
      height: 467px
      background: url("./images/platform_bg.png") no-repeat top
      .u-platform-con
        width: 1200px
        height: 467px
        margin: 0 auto
        padding-top: 60px
        box-sizing: border-box
        h1
          text-align: center
          color: #cc3333
          font-size:28px
          margin-top: 0
        p
          text-align: center
          color: #999999
          font-size: 12px
        .u-platform-con-text
          .text_left
            width: 577px
            overflow: hidden
            margin-left: 2%
            margin-top: 10px
            float: left
            h2
              font-size: 23px
              color: #3366cc
              span
                color: #cc3333
            .text_img
              margin-top: 65px
            p:nth-child(2)
              color: #666
              font-size: 20px
              margin-top: 14px
              line-height: 30px
              text-align: left
            p:nth-child(3)
              color: #3366cc
              font-size: 20px
              margin-top: 15px
              text-align: left
          .img_right
            float: left
            margin-top: 10px
    .u-teaching
        width: 100%
        height: 447px
        background: url("./images/bg_teaching.jpg")
        .u-teaching-con
          width: 1200px
          margin: 0 auto
          padding-top: 60px
          box-sizing: border-box
          h1
            font-size: 27px
            text-align: center
            color: #fff
          p
            font-size: 22px
            color: #ffffff
            margin-top: 40px
          h6
            font-size: 20px
            color: #fff
            margin-top: 30px
            line-height: 30px
            font-weight: normal
          .GetInvolved
            margin: 40px auto 0
            width: 206px;
            height: 50px;
            border-radius: 5px
            text-align: center
            line-height: 50px
            color: #333333
            background:#ffcc00
            cursor: pointer
            a
              display:block
              text-decoration: none
              font-size: 22px
            a:hover
              text-decoration: none
    .u-news
      width: 100%
      height: 970px
      .news
        width: 1080px
        margin: 0 auto
        padding-top: 60px
        box-sizing: border-box
        h1
          font-size: 30px
          color:#000000
          text-align: center
        p:nth-child(2)
          font-size: 10px
          color: #999999
          text-align: center
        p:nth-child(3)
          font-size: 22px
          color: #000
          margin-top: 60px
          text-align: center
        p:nth-child(4)
          margin-top: 30px
          font-size: 19px
          color: #848585
          line-height: 30px
        .box_three
          margin-top: 70px
          span
            display: inline-block
            width: 314px
            height: 98px
            font-size: 24px
            text-align: center
            line-height: 98px
            color: #fff
            border-radius: 5px
            margin-left: 5%
            background: #bbb
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2)
          span:last-child
            background: #5c5c5c
          span:first-child
            margin-left: 0
            background: #5d87dc
        .box_img
          overflow: hidden
          margin:75px auto 0
    .marquee
      overflow: hidden
</style>
